var InfoEditPage=React.createClass({
  render:function(){
    return (
    	<div id="InfoEditPage">
    		<StudioDetailBox studioId={this.props.studioId} studioName={this.props.studioName} brief={this.props.brief} city={this.props.city} phone={this.props.phone} refresh={this.props.refresh}/>
    		<TeacherIntroBox studioId={this.props.studioId} title={"师资介绍"} />
    		<RecruitmentBox studioId={this.props.studioId} title={"教师招聘"} />
    		<WorksBox studioId={this.props.studioId}  title={"作品集"}/>
    		<VideosBox studioId={this.props.studioId} title={"视频"}/>
    		<EnvironmentBox studioId={this.props.studioId}  title={"画室环境"}/>
    	</div>

    	);
  }
});

var RecruitmentBox=React.createClass({
	getInitialState: function() {
		return {
			recruitment: "ggg",
			editing: false
		}
	},
	componentDidMount: function() {
		
		$.ajax({
		    url:config.api.getStudioWorks[0].replace(/\<\w+\>/,this.props.studioId), // for testing
		    type:config.api.getStudioWorks[1], // for testing
		    success:function(d){
		      this.setState({recruitment: d.works});
		    }.bind(this),
		    error:function(){
		      alert("获取数据出错");
	    	}
	  	});
	},
	editHandler:function(e){
		if(this.state.editing){
			this.setState({
				editing:false
			});
			$(e.target).text("编辑");
			this.updateRecuitment();
		}else{
			this.setState({
				editing:true
			});
			$(e.target).text("完成");
		}
	},
	updateRecuitment: function() {
		var target = $('#recruitmentEditor');

		$.ajax({
			url: config.api.updateStudioTeacherIntro[0].replace(/\<\w+\>/,this.props.studioId),
			type: config.api.updateStudioTeacherIntro[1],
			date: {
				recruitment: escape(target.html())
			},
			success: function(d) {
				this.setState(d.recruitment);
			},
			error: function(d) {
				alert("获取数据出错");
			}
		})
	},
	render: function() {
		var recruitment = this.state.editing?
						<div id="recruitmentEditor" ref={function(target) {
							if (target != null) {
								$(target.getDOMNode()).editable({
							      inlineMode: false,

							       buttons: ['bold', 'italic', 'underline', 'strikeThrough', 'fontFamily', 'fontSize', 'color', 'formatBlock', 'blockStyle', 'inlineStyle', 'align', 'insertOrderedList', 'insertUnorderedList', 'outdent', 'indent', 'selectAll', 'createLink', 'table', 'undo', 'redo', 'html', 'insertHorizontalRule', 'removeFormat', 'fullscreen']
							    });
							}
						    return 'recruitment';
						}}>{this.state.recruitment}</div>
						: <div>{unescape(this.state.recruitment)}</div>

		return (
				<div className="EditInfoBox">
					<div className="EditInfoBoxHeader">
						<h4>{this.props.title}</h4>
						<div className="editInfoBtn" onClick={this.editHandler}><span>编辑</span></div>
					</div>
					{{recruitment}}
				</div>
			);
	}
});

var TeacherIntroBox=React.createClass({
	getInitialState: function() {
		return {
			intro: "testing",
			editing: false
		}
	},
	componentDidMount: function() {
		$.ajax({
		    url:config.api.getStudioWorks[0].replace(/\<\w+\>/,this.props.studioId), // for testing
		    type:config.api.getStudioWorks[1], // for testing
		    success:function(d){
		      this.setState({intro: d.works});
		    }.bind(this),
		    error:function(){
		      alert("获取数据出错");
	    	}
	  	});
	},
	editHandler:function(e){
		if(this.state.editing){
			this.setState({
				editing:false
			});
			$(e.target).text("编辑");
			this.updateTeacherIntro();
		}else{
			this.setState({
				editing:true
			});
			$(e.target).text("完成");
		}
	},
	updateTeacherIntro: function() {
		var target = $("#teacherIntroEditor");

		$.ajax({
			url: config.api.updateStudioTeacherIntro[0].replace(/\<\w+\>/,this.props.studioId),
			type: config.api.updateStudioTeacherIntro[1],
			data: escape(target.html()),
			success: function(d) {
				this.setState(d.intro);
			},
			error: function(d) {
				alert("获取数据出错");
			}
		})
	},
	render: function() {
		var introbox = this.state.editing?
						<div id="teacherIntroEditor" ref={function(target) {
							if (target != null) {
								$(target.getDOMNode()).editable({
							      inlineMode: false,

							       buttons: ['bold', 'italic', 'underline', 'strikeThrough', 'fontFamily', 'fontSize', 'color', 'formatBlock', 'blockStyle', 'inlineStyle', 'align', 'insertOrderedList', 'insertUnorderedList', 'outdent', 'indent', 'selectAll', 'createLink', 'table', 'undo', 'redo', 'html', 'insertHorizontalRule', 'removeFormat', 'fullscreen']
							    });
							}
						    return 'recruitment';
						}}>{this.state.intro}</div>
						: <div>{unescape(this.state.intro)}</div>

		return (
				<div className="EditInfoBox">
					<div className="EditInfoBoxHeader">
						<h4>{this.props.title}</h4>
						<div className="editInfoBtn" onClick={this.editHandler}><span>编辑</span></div>
					</div>
					{{introbox}}
				</div>
			);
	}
});

var WorksBox=React.createClass({
	imgFiles:[],
	getInitialState:function(){
		return {
			images:[],
			editing:false//是否在编辑状态

		};
	},
	componentDidMount:function(){
	  var self=this;
	  $.ajax({
	    url:config.api.getStudioWorks[0].replace(/\<\w+\>/,this.props.studioId),
	    type:config.api.getStudioWorks[1],
	    success:function(d){
	      this.setState({images:d.works});
	    }.bind(this),
	    error:function(){
	      alert("获取数据出错");
	    }
	  });
	  function getFiles_work(e) {
	  	// isUpload = false;
	  	e = e || window.event;
	  	//获取file input中的图片信息列表
	  	var files = e.target.files,
	  		//验证是否是图片文件的正则
	  		reg = /image\/.*/i,
	  		fileType,
	  		fileName,
	  		fileNames="";

	  	for(var i=0,len=files.length;i<len;i++){
	  		fileType = files[i].type;
	  		fileName = files[i].name; 
	  		if (!reg.test(fileType)) {
	  			alert("你选择的" + fileName + "文件不是图片");
	  			self.imgFiles.splice(0,self.imgFiles.length);//清空数组
	  			return;
	  		}
	  		self.imgFiles.push(files[i]);
	  		fileNames+=fileNames==""?fileName:","+fileName;
	  	}
	  	if(fileNames.length>50){
	  		fileNames=fileNames.substring(0,50)+"...";//截取过长字符串
	  	}
	  	fileNames+="等"+len+"个文件";
	  	$(".selectedFileName_work").text(fileNames);//提示选择的文件
	  	
	  }
	  //上传作品
	  $("#selectWork").on("click",function(){
	  	var $workFileInput =$("#workFileInput");
	  	$workFileInput.click();
	  });
	  
	  $(".uploadWorkInput").on("change","#workFileInput",getFiles_work);
	  $("#uploadWorkBtn").on("click", function(event) {
	  	event.preventDefault();

	  	if (self.imgFiles.length == 0) {
	  		alert("未选择图片");
	  	} else {
	  		$("#uploadWorkBtn").attr("disabled", "disabled") //禁用上传按钮
	  		.text("上传中");
	  		uploadImgFiles(self.imgFiles, self.addWorksToStudio);
	  	}
	  });
	},
	componentDidUpdate:function(){
		var $wrapper=$(".imageItemWrapper");
		var w=$wrapper.width();
		$wrapper.css({lineHeight:w+"px"})//使照片垂直居中
				.find(".imageItem")
				.css({
					maxWidth:w+"px",
					maxHeight:w+"px"
				});
		//使图片不超过wrapper的大小
	},
	reload:function(){
		$.ajax({
		  url:config.api.getStudioWorks[0].replace(/\<\w+\>/,this.props.studioId),
		  type:config.api.getStudioWorks[1],
		  success:function(d){
		    this.setState({images:d.works});
		  }.bind(this),
		  error:function(){
		    alert("刷新出错");
		  }
		});
	},
	addWorksToStudio:function(responseUrls){
		console.log("添加画室作品前检查",responseUrls);
		var self=this;
		//var studioId=cookie.getCookie("studioId");
		$.ajax({
		  url:config.api.addStudioWork[0].replace(/\<\w+\>/,this.props.studioId),
		  type:config.api.addStudioWork[1],
		  data:{
		  	imageUrls:JSON.stringify(responseUrls)
		  },
		  success:function(d){
		    $("#uploadWorkBtn").text("添加成功");
		    setTimeout(function(){
		    	$('#uploadWorkModal').modal('hide');
		    	$("#uploadWorkBtn").text("立即上传").removeAttr("disabled");
		    	self.emptyInput_work();
		    	self.reload();
		    },2000);
		  },
		  error:function(){
		    alert("添加作品失败");
		  }
		});
	},
	emptyInput_work:function () {
		$(".selectedFileName_work").text("");
		var fileInput = $("#workFileInput")
		fileInput.after(fileInput.clone().val(""));
		fileInput.remove();
	},
	editHandler:function(e){
		if(this.state.editing){
			this.setState({
				editing:false
			});
			$(e.target).text("编辑");
		}else{
			this.setState({
				editing:true
			});
			$(e.target).text("完成");
		}
	},
	deleteWork:function(e){
		var c=confirm("确定删除？");
		if(c){
			var url=$(e.target).next().attr("src");
			$.ajax({
			  url:config.api.deleteStudioWork[0].replace(/\<\w+\>/,this.props.studioId),
			  type:config.api.deleteStudioWork[1],
			  data:{
			  	imageUrl:url
			  },
			  success:function(d){
			    this.reload();
			  }.bind(this),
			  error:function(){
			    alert("删除失败");
			  }
			});
		}

	},
	render:function(){
		var self=this;
		var mediaList;
		if(this.state.editing){
			mediaList=this.state.images.map(function(image){
						return (
								<div className="imageItemWrapper">
									<img className="deleteIcon" src="../../image/delete.png" onClick={self.deleteWork}/>
									<img className="imageItem" src={image}/>
								</div>
								
							);
					});
		}else{
			mediaList=this.state.images.map(function(image){
						return (
								<div className="imageItemWrapper">
									<img className="imageItem" src={image}/>
								</div>
								
							);
					});
		}
		// var mediaList=this.state.images.map(function(image){
		// 	return (
		// 			<div className="imageItemWrapper">
		// 				<img className="imageItem" src={image} onClick={self.state.editing?self.deleteWork:null}/>
		// 			</div>
					
		// 		);
		// });
		return (
			<div className="MediaInfoBox">
				<div className="MediaInfoBoxHeader">
					<h4>{this.props.title}</h4>
					<div id="editMediaInfoBtn" onClick={this.editHandler}><span>编辑</span></div>
					<div id="uploadMediaInfoBtn" data-toggle="modal" data-target="#uploadWorkModal"><span>上传</span></div>
				</div>
				{mediaList}
				<div className="modal fade" id="uploadWorkModal" tabindex="-1" role="dialog" aria-labelledby="uploadWorkModalLabel" aria-hidden="true">
				  <div className="modal-dialog">
				    <div className="modal-content uploadWorkContainer">
				      <div className="uploadWorkBody">
				        <p className="selectedFileName_work"></p>

				        <div className="uploadWorkInput">
				          <button className="btn btn-primary btn-md" id="selectWork">选择文件</button>
				          <input type="file" name="image" id="workFileInput" multiple="multiple" className="hide"/>
				        </div>

				        <button className="btn btn-primary btn-md" id="uploadWorkBtn">立即上传</button>   

				      </div>
				      <div className="cancel" aria-hidden="true" data-dismiss="modal">
				  	  </div>
				    </div>
				  </div>
				</div>
			</div>
			);
	}
});
var EnvironmentBox=React.createClass({
	imgFiles:[],
	getInitialState:function(){
		return {
			images:[],
			editing:false
		};
	},
	componentDidMount:function(){
	  var self=this;
	  $.ajax({
	    url:config.api.getStudioEnvironment[0].replace(/\<\w+\>/,this.props.studioId),
	    type:config.api.getStudioEnvironment[1],
	    success:function(d){
	      this.setState({images:d.environment});
	    }.bind(this),
	    error:function(){
	      alert("获取数据出错");
	    }
	  });
	  function getFiles_Environment(e) {
	  	// isUpload = false;
	  	e = e || window.event;
	  	//获取file input中的图片信息列表
	  	var files = e.target.files,
	  		//验证是否是图片文件的正则
	  		reg = /image\/.*/i,
	  		fileType,
	  		fileName,
	  		fileNames="";

	  	for(var i=0,len=files.length;i<len;i++){
	  		fileType = files[i].type;
	  		fileName = files[i].name; 
	  		if (!reg.test(fileType)) {
	  			alert("你选择的" + fileName + "文件不是图片");
	  			self.imgFiles.splice(0,self.imgFiles.length);//清空数组
	  			return;
	  		}
	  		self.imgFiles.push(files[i]);
	  		fileNames+=fileNames==""?fileName:","+fileName;
	  	}
	  	if(fileNames.length>50){
	  		fileNames=fileNames.substring(0,50)+"...";//截取过长字符串
	  	}
	  	fileNames+="等"+len+"个文件";
	  	$(".selectedFileName_Environment").text(fileNames);//提示选择的文件
	  	
	  }
	  //上传作品
	  $("#selectEnvironment").on("click",function(){
	  	var $EnvironmentFileInput =$("#EnvironmentFileInput");
	  	$EnvironmentFileInput.click();
	  });
	  
	  $(".uploadEnvironmentInput").on("change","#EnvironmentFileInput", getFiles_Environment);
	  $("#uploadEnvironmentBtn").on("click", function(event) {
	  	event.preventDefault();

	  	if (self.imgFiles.length == 0) {
	  		alert("未选择图片");
	  	} else {
	  		$("#uploadEnvironmentBtn").attr("disabled", "disabled") //禁用上传按钮
	  		.text("上传中");
	  		uploadImgFiles(self.imgFiles, self.addEnvironmentsToStudio);
	  	}


	  });
	},
	componentDidUpdate:function(){
		var $wrapper=$(".imageItemWrapper");
		var w=$wrapper.width();
		$wrapper.css({lineHeight:w+"px"})//使照片垂直居中
				.find(".imageItem")
				.css({
					maxWidth:w+"px",
					maxHeight:w+"px"
				});
		//使图片不超过wrapper的大小
	},
	reload:function(){
		$.ajax({
		  url:config.api.getStudioEnvironment[0].replace(/\<\w+\>/,this.props.studioId),
		  type:config.api.getStudioEnvironment[1],
		  success:function(d){
		    this.setState({images:d.environment});
		  }.bind(this),
		  error:function(){
		    alert("刷新出错");
		  }
		});
	},
	addEnvironmentsToStudio:function(responseUrls){
		var self=this;
		var studioId=cookie.getCookie("studioId");
		$.ajax({
		  url:config.api.addStudioEnvironment[0].replace(/\<\w+\>/,studioId),
		  type:config.api.addStudioEnvironment[1],
		  data:{
		  	imageUrls:JSON.stringify(responseUrls)
		  },
		  success:function(d){
		    $("#uploadEnvironmentBtn").text("添加成功");
		    setTimeout(function(){
		    	$('#uploadEnvironmentModal').modal('hide');
		    	$("#uploadEnvironmentBtn").text("立即上传").removeAttr("disabled");
		    	self.emptyInput_Environment();
		    	self.reload();
		    },2000);
		  },
		  error:function(){
		    alert("添加环境图片失败");
		  }
		});
	},
	emptyInput_Environment:function () {
		$(".selectedFileName_Environment").text("");
		var fileInput = $("#EnvironmentFileInput")
		fileInput.after(fileInput.clone().val(""));
		fileInput.remove();
	},
	editHandler:function(e){
		if(this.state.editing){
			this.setState({
				editing:false
			});
			$(e.target).text("编辑");
		}else{
			this.setState({
				editing:true
			});
			$(e.target).text("完成");
		}
	},
	deleteWork:function(e){
		var c=confirm("确定删除？");
		if(c){
			var url=$(e.target).next().attr("src");
			$.ajax({
			  url:config.api.deleteStudioEnvironment[0].replace(/\<\w+\>/,this.props.studioId),
			  type:config.api.deleteStudioEnvironment[1],
			  data:{
			  	imageUrl:url
			  },
			  success:function(d){
			    this.reload();
			  }.bind(this),
			  error:function(){
			    alert("删除失败");
			  }
			});
		}

	},
	render:function(){
		var self=this;
		var mediaList;
		if(this.state.editing){
			mediaList=this.state.images.map(function(image){
						return (
								<div className="imageItemWrapper">
									<img className="deleteIcon" src="../../image/delete.png" onClick={self.deleteWork}/>
									<img className="imageItem" src={image}/>
								</div>
								
							);
					});
		}else{
			mediaList=this.state.images.map(function(image){
						return (
								<div className="imageItemWrapper">
									<img className="imageItem" src={image}/>
								</div>
								
							);
					});
		}
		// var mediaList=this.state.images.map(function(image){
		// 	return (
		// 			<div className="imageItemWrapper">
		// 				<img className="imageItem" src={image} onClick={self.state.editing?self.deleteWork:null}/>
		// 			</div>
					
		// 		);
		// });
		return (
			<div className="MediaInfoBox">
				<div className="MediaInfoBoxHeader">
					<h4>{this.props.title}</h4>
					<div id="editMediaInfoBtn" onClick={this.editHandler}><span>编辑</span></div>
					<div id="uploadMediaInfoBtn" data-toggle="modal" data-target="#uploadEnvironmentModal"><span>上传</span></div>
				</div>
				{mediaList}
				<div className="modal fade" id="uploadEnvironmentModal" tabindex="-1" role="dialog" aria-labelledby="uploadEnvironmentModalLabel" aria-hidden="true">
				  <div className="modal-dialog">
				    <div className="modal-content uploadEnvironmentContainer">
				      <div className="uploadEnvironmentBody">
				        <p className="selectedFileName_Environment"></p>

				        <div className="uploadEnvironmentInput">
				          <button className="btn btn-primary btn-md" id="selectEnvironment">选择文件</button>
				          <input type="file" name="image" id="EnvironmentFileInput" multiple="multiple" className="hide"/>
				        </div>

				        <button className="btn btn-primary btn-md" id="uploadEnvironmentBtn">立即上传</button>   

				      </div>
				    </div>
				  </div>
				</div>
			</div>
			);
	}
});
var VideosBox=React.createClass({
	imgFiles:[],//视频缩略图文件
	videoFiles:[],//存放读取到的视频文件
	responseUrls_video:{
		thumbnail:"",
		videoUrl:""
	},//存放返回的文件地址
	getInitialState:function(){
		return {
			videos:[],
			loaded:false,
			editing:false
		};
	},
	componentDidMount:function(){
	  $.ajax({
	    url:config.api.getStudioVideo[0].replace(/\<\w+\>/,this.props.studioId),
	    type:config.api.getStudioVideo[1],
	    success:function(d){
	      console.log(d);
	      this.setState({videos:d.videos});
	      this.setState({loaded:true});
	    }.bind(this),
	    error:function(){
	      alert("获取数据出错");
	    }
	  });
	  var self=this;
	  function getFiles_Video(e) {
	  	// isUpload = false;
	  	e = e || window.event;
	  	//获取file input中的图片信息列表
	  	var files = e.target.files,
	  		//验证是否是图片文件的正则
	  		reg = /video\/.*/i,
	  		fileType,
	  		fileName;
	  		fileType = files[0].type;
	  		fileName = files[0].name; 
	  		if (!reg.test(fileType)) {
	  			alert("你选择的" + fileName + "文件不是视频");
	  			videoFile=null;//清空
	  			return;
	  		}
	  		self.videoFiles.push(files[0]);
	  	if(fileName.length>50){
	  		fileName=fileName.substring(0,50)+"...";//截取过长字符串
	  	}
	  	$(".selectedFileName_Video").text(fileName);//提示选择的文件
	  	
	  }
	  function getFiles_Thumbnail(e) {
	  	// isUpload = false;
	  	e = e || window.event;
	  	//获取file input中的图片信息列表
	  	var files = e.target.files,
	  		//验证是否是图片文件的正则
	  		reg = /image\/.*/i,
	  		fileType,
	  		fileName;
	  		fileType = files[0].type;
	  		fileName = files[0].name; 
	  		if (!reg.test(fileType)) {
	  			alert("你选择的" + fileName + "文件不是图像");
	  			self.imgFiles=[];//清空
	  			return;
	  		}
	  		self.imgFiles.push(files[0]);
	  	if(fileName.length>50){
	  		fileName=fileName.substring(0,50)+"...";//截取过长字符串
	  	}
	  	$(".selectedThumbnail").text(fileName);//提示选择的文件

	  }
	  
	  $(".uploadVideoInput").on("change", "#VideoFileInput",getFiles_Video);
	  $(".uploadVideoInput").on("change", "#videoThumbnailInput",getFiles_Thumbnail);
	  $("#saveVideoBtn").on("click", function(event) {
	  	event.preventDefault();
	  	//发布视频
	  	self.createVideo();
	  });
	  $("#uploadVideoBtn").on("click",function(){
	  	uploadVideoFiles(self.videoFiles,function(urls){
	  		console.log(urls);
	  		self.responseUrls_video.videoUrl=urls[0];//将返回的url存入responseUrls_video对象
	  		$("#uploadVideoBtn").text("成功");
	  	});
	  });
	  $("#uploadThumbnailBtn").on("click",function(){
	  	uploadImgFiles(self.imgFiles,function(urls){
	  		$("#uploadThumbnailBtn").text("成功");
	  		//alert("上传缩略图成功");
	  		self.responseUrls_video.thumbnail=urls[0];//将返回的url存入responseUrls_video对象
	  	});
	  });
	  $('#uploadVideoModal').on('hide.bs.modal', function (e) {
	  	self.emptyInput_Video();//关闭模态框时清空输入
	  });
	  $('#uploadVideoModal').on('show.bs.modal', function (e) {
	  	var studioId=cookie.getCookie("studioId");
	  	$.ajax({
	  	  url:config.api.getStudioTeachers[0].replace(/\<\w+\>/,studioId),
	  	  type:config.api.getStudioTeachers[1],
	  	  success:function(d){
	  	     var options="";
	  	     d.teachers.forEach(function(teacher){
	  	     	options+="<option value="+teacher.userId+">"+teacher.name+"</option>"
	  	     });
	  	     $("#selectTeacher").html(options);
	  	  },
	  	  error:function(){
	  	    alert("获取教师数据出错");
	  	  }
	  	});
	  });
	},
	componentDidUpdate:function(){
		var $wrapper=$(".imageItemWrapper");
		var w=$wrapper.width();
		$wrapper.css({lineHeight:w+"px"})//使照片垂直居中
				.find(".imageItem")
				.css({
					maxWidth:w+"px",
					maxHeight:w+"px"
				});
		//使图片不超过wrapper的大小
	},
	reload:function(){
		$.ajax({
		  url:config.api.getStudioVideo[0].replace(/\<\w+\>/,this.props.studioId),
		  type:config.api.getStudioVideo[1],
		  success:function(d){
		    this.setState({videos:d.videos});
		  }.bind(this),
		  error:function(){
		    alert("刷新数据出错");
		  }
		});
	},
	addVideoToStudio:function (studioId,videoId){
		var self=this;
		$.ajax({
		  url:config.api.addStudioVideo[0].replace(/\<\w+\>/,studioId),
		  type:config.api.addStudioVideo[1],
		  data:{
			videoId:videoId
		  },
		  success:function(d){
		    $("#saveVideoBtn").text("保存成功");
		    setTimeout(function(){
		    	$('#uploadVideoModal').modal('hide');
		    	$("#saveVideoBtn").text("保存").removeAttr("disabled");
		    	$("#uploadThumbnailBtn").text("上传");
		    	$("#uploadVideoBtn").text("上传");
		    	self.emptyInput_Video();
		    	self.reload();
		    },2000);
		  },
		  error:function(){
		    alert("添加视频失败");
		  }
		});
	},
	createVideo:function (){
		var self=this;
		var studioId=cookie.getCookie("studioId");
		var videoTitle=$("#VideoTitleInput").val();
		var videoDescription=$("#VideoDescription").val();
		var userId=$("#selectTeacher").val();
		console.log("创建前检查",videoDescription);
		$.ajax({
		  url:config.api.createVideo[0],
		  type:config.api.createVideo[1],
		  data:{
		  	title:videoTitle,
		  	description:videoDescription,
		  	imageUrl:self.responseUrls_video.thumbnail,
		  	userId:userId,
		  	studioId:studioId,
		  	videoUrl:self.responseUrls_video.videoUrl
		  },
		  success:function(d){
		  	self.addVideoToStudio(studioId,d.videoId);//将视频添加到画室
		  },
		  error:function(){
		    alert("添加视频失败");
		  }
		});
	},
	emptyInput_Video:function () {
		$(".selectedFileName_Video").text("");
		var fileInput = $("#VideoFileInput");
		fileInput.after(fileInput.clone().val(""));
		fileInput.remove();
		var fileInput2=$("#videoThumbnailInput");
		fileInput2.after(fileInput2.clone().val(""));
		fileInput2.remove();
		var textInputs=$(".uploadVideoContainer").find("input[type=text]");
		textInputs.val("");
		$(".uploadVideoContainer").find("textarea").val("");
		this.imgFiles=[];
		this.videoFiles=[];
	},
	editHandler:function(e){
		if(this.state.editing){
			this.setState({
				editing:false
			});
			$(e.target).text("编辑");
		}else{
			this.setState({
				editing:true
			});
			$(e.target).text("完成");
		}
	},
	deleteVideo:function(e){
		var c=confirm("确定删除？");
		if(c){
			var videoid=$(e.target).data("videoid");
			$.ajax({
			  url:config.api.deleteStudioVideo[0].replace(/\<\w+\>/,this.props.studioId),
			  type:config.api.deleteStudioVideo[1],
			  data:{
			  	videoId:videoid
			  },
			  success:function(d){
			    this.reload();
			  }.bind(this),
			  error:function(){
			    alert("删除失败");
			  }
			});
		}

	},
	render:function(){
		var self=this;
		var mediaList;
		if(this.state.loaded){
			if(this.state.editing){
				mediaList=this.state.videos.map(function(video){
							return (
									<div className="imageItemWrapper">
										<img className="deleteIcon" src="../../image/delete.png" onClick={self.deleteVideo} data-videoid={video.videoId}/>
										<img className="imageItem" src={video.imageUrl} data-videoid={video.videoId} />
										<img className="playIcon" src="../../image/play.png"/>
									</div>
									
								);
						});
			}else{
				mediaList=this.state.videos.map(function(video){
							return (
									<div className="imageItemWrapper">
										<img className="imageItem" src={video.imageUrl} data-videoid={video.videoId}/>
										<img className="playIcon" src="../../image/play.png"/>
									</div>
									
								);
						});
			}
			// mediaList=this.state.videos.map(function(video){
			// 	return (
			// 		<div className="imageItemWrapper" >
			// 			<img className="imageItem" src={video.imageUrl} onClick={self.state.editing?self.deleteVideo:null} data-videoid={video.videoId}/>
			// 			<img className="playIcon" src="../../image/play.png"/>
			// 		</div>
			// 		);
			// });
		}else{
			mediaList=<p>加载中</p>;
		}

		return (
			<div className="MediaInfoBox">
				<div className="MediaInfoBoxHeader">
					<h4>{this.props.title}</h4>
					<div id="editMediaInfoBtn" onClick={this.editHandler}><span>编辑</span></div>
					<div id="uploadMediaInfoBtn" data-toggle="modal" data-target="#uploadVideoModal"><span>上传</span></div>
				</div>
				{mediaList}
				<div className="modal fade" id="uploadVideoModal" tabindex="-1" role="dialog" aria-labelledby="uploadVideoModalLabel" aria-hidden="true">
				  <div className="modal-dialog">
				    <div className="modal-content uploadVideoContainer">
				      <div className="uploadVideoBody">
				        <div className="uploadVideoInput">
				          <h5>选择老师</h5>
				          <select name="" id="selectTeacher">
				            <option value="abc">abc</option>
				          </select>
				          <h5>视频标题</h5>
				          <input type="text" id="VideoTitleInput" placeholder="输入视频标题"/>
				          <h5>视频描述</h5>
				          <textarea type="text" id="VideoDescription" placeholder="输入视频描述"></textarea>
				          <h5>缩略图</h5>
				          <input type="file"  id="videoThumbnailInput" />
				          <button className="btn btn-primary btn-md" id="uploadThumbnailBtn">上传</button>
				          <h5>视频</h5>
				          <input type="file"  id="VideoFileInput" />
				          <button className="btn btn-primary btn-md" id="uploadVideoBtn">上传</button>
				        </div>
				        <div className="actionBtns">
				          <button className="btn btn-default btn-md" data-dismiss="modal" id="cancelBtn">取消</button>   
				          <button className="btn btn-primary btn-md" id="saveVideoBtn">保存</button>   
				        </div>
				      </div>
				    </div>
				  </div>
				</div>
			</div>
			);
	}
});
var StudioDetailBox=React.createClass({
	getInitialState:function(){
		var recentlyChoose=cookie.getCookie("recentlyChooseCity");
		return {
			editing:false,
			info:{
				name:this.props.studioName,
				brief:this.props.brief,
				city:this.props.city,
				phone: this.props.phone
			},
			recentlyChooseCity:recentlyChoose//最近选择
		}
	},
	componentDidMount:function(){
		var self=this;
		$(document).on("click",".isonline,.isoffline",function(){
				var $this=$(this);
				var city=$this.text();
				self.setCity(city);
			});//点击城市名称事件
	},
	setCity:function(city){
		this.setState({
			info:{
				name :this.state.info.name,
				description:this.state.info.brief,
				phone: this.state.info.phone,
				city:city
			},
			recentlyChooseCity:city
		});
		cookie.setCookie("recentlyChooseCity",city);//将最近的选择保存到cookie
		this.syncInfo();
	},
	clickToEditHandler:function(){
		//this.state.editing?this.setState({editing:false}):this.setState({editing:true});
		if(this.state.editing){
			this.setState({editing:false});
			this.syncInfo();
		}else{
			this.setState({editing:true});
		}
	},
	//将资料同步到服务器
	syncInfo:function(){
		console.log("更新画室城市",this.state.info.city);
		$.ajax({
			url:config.api.updateStudioInfo[0].replace(/\<\w+\>/,this.props.studioId),
			type:config.api.updateStudioInfo[1],
			data:{
				name :this.state.info.name,
				description:this.state.info.brief,
				city:this.state.info.city,
				phone: this.state.info.phone
			},
			success:function(){
				this.props.refresh();//触发app层的数据更新
			}.bind(this),
			error:function(){
				alert("保存失败");
			}
		});
	},
	displayInput:function(){
		this.setState({
			info:{
				name:React.findDOMNode(this.refs.nameInput).value,
				brief:React.findDOMNode(this.refs.briefInput).value,
				phone: React.findDOMNode(this.refs.phoneInput).value
			}
		});//获取用户输入并保存到state中
	},
	render:function(){
		var nameContent=this.state.editing?<input  ref="nameInput" value={this.state.info.name} onChange={this.displayInput}></input>:<span className="textInfo" id="nameContent">{this.state.info.name}</span>;
		var briefContent=this.state.editing?<textarea ref="briefInput" value={this.state.info.brief} onChange={this.displayInput}></textarea>:<span className="textInfo" id="briefContent">{this.state.info.brief}</span>;
		var phoneContent=this.state.editing?<input ref="phoneInput" value={this.state.info.phone} onChange={this.displayInput}></input>:<span className="textInfo" id="phoneContent">{this.state.info.phone}</span>;
		return (
			<div className="studioDetailBox">
				<div className="textBox">
					<p className="name"><span>名称：</span>{nameContent}</p>
					<p className="phone"><span>电话号码：</span>{phoneContent}</p>
					<p className="selectCity" data-toggle="modal" data-target="#selectCityModal">
						所在地：
						<span>{this.state.info.city+" "}</span>
						<span id="selectCityBtn">[选择城市]</span>
					</p>
					<p className="brief"><span>简介：</span>{briefContent}</p>

				</div>
				<div id="editInfoBtn" onClick={this.clickToEditHandler}><span>{this.state.editing?"保存":"编辑"}</span></div>
				<div className="modal fade" id="selectCityModal" tabindex="-1" role="dialog" aria-labelledby="selectCityModalLabel" aria-hidden="true">
				  <div className="modal-dialog cityModalDialog">
				    <div className="modal-content selectCityContainer">
					    <div id="change-city">
					      <div id="bdw" className="bdw">
					        <div id="bd" className="cf">
					          <div className="choosecities">
					          <div className="citieslist">
					            <ol className="popularCity_recently">
					            	<li id="popularCity">
					            	  <p className="cf">
					            	  	<div className="my_label">
					            	  		<strong>常用城市</strong>
					            	  	</div>
					            	  	<span>
						            	  	<a className="isonline" href="#">北京</a>
						            	  	<a className="isoffline" href="#">天津</a>
						            	  	<a className="isoffline" href="#">上海</a>
						            	  	<a className="isoffline" href="#">广州</a>
						            	  	<a className="isoffline" href="#">深圳</a>
						            	  	<a className="isoffline" href="#">沈阳</a>
						            	  	<a className="isoffline" href="#">杭州</a>
						            	  	<a className="isoffline" href="#">重庆</a>
						            	  	<a className="isoffline" href="#">成都</a>
						            	  	<a className="isoffline" href="#">武汉</a>
						            	  	<a className="isoffline" href="#">长沙</a>
						            	  	<a className="isoffline" href="#">青岛</a>
						            	  	<a className="isoffline" href="#">南京</a>
						            	  	<a className="isoffline" href="#">珠海</a>
						            	  	<a className="isoffline" href="#">宁波</a>
						            	  	<a className="isoffline" href="#">合肥</a>
						            	  	<a className="isoffline" href="#">西安</a>
						            	  	<a className="isoffline" href="#">郑州</a>
						            	  	<a className="isoffline" href="#">厦门</a>
						            	  	<a className="isoffline" href="#">福州</a>
						            	  	<a className="isoffline" href="#">济南</a>
						            	  	<a className="isoffline" href="#">无锡</a>
					            	  	</span>
					            	  </p>
					            	</li>
					            	<li id="recently">
					            	  <p className="cf">
					            	  	<div className="my_label">
					            	  		<strong>最近选择</strong>
					            	  	</div>
					            	  	<span>
					            	  		{this.state.recentlyChooseCity==""?"":<a className="isonline" href="#">{this.state.recentlyChooseCity}</a>}
					            	  	</span>
					            	  </p>
					            	</li>
					            </ol>
					            <ol className="hasallcity">
					              <li id="city-A">
					                <p className="cf"><span className="label"><strong>A</strong></span><span><a className="isonline" href="#">鞍山</a><a className="isoffline" href="#">安顺</a><a className="isoffline" href="#">阿坝</a><a className="isoffline" href="#">阿拉善</a><a className="isoffline" href="#">阿里</a><a className="isoffline" href="#">安康</a><a className="isoffline" href="#">阿克苏</a><a className="isoffline" href="#">安庆</a><a className="isoffline" href="#">阿勒泰</a><a className="isoffline" href="#">安阳</a><a className="isoffline" href="#">澳门</a></span></p>
					              </li>
					              <li id="city-B">
					                <p className="cf"><span className="label"><strong>B</strong></span><span><a className="isonline" href="#">北京</a><a className="isonline" href="#">包头</a><a className="isoffline" href="#">保定</a><a className="isoffline" href="#">巴中</a><a className="isoffline" href="#">蚌埠</a><a className="isoffline" href="#">白银</a><a className="isoffline" href="#">白城</a><a className="isoffline" href="#">白山</a><a className="isoffline" href="#">北海</a><a className="isoffline" href="#">巴彦淖尔</a><a className="isoffline" href="#">宝鸡</a><a className="isoffline" href="#">百色</a><a className="isoffline" href="#">本溪</a><a className="isoffline" href="#">保山</a><a className="isoffline" href="#">毕节</a><a className="isoffline" href="#">博尔塔拉</a><a className="isoffline" href="#">滨州</a><a className="isoffline" href="#">亳州</a><a className="isoffline" href="#">巴州</a></span></p>
					              </li>
					              <li id="city-C">
					                <p className="cf"><span className="label"><strong>C</strong></span><span><a className="isonline" href="#">成都</a><a className="isonline" href="#">重庆</a><a className="isonline" href="#">常州</a><a className="isonline" href="#">长沙</a><a className="isonline" href="#">长春</a><a className="isoffline" href="#">赤峰</a><a className="isoffline" href="#">楚雄</a><a className="isoffline" href="#">长治</a><a className="isoffline" href="#">巢湖</a><a className="isoffline" href="#">崇左</a><a className="isoffline" href="#">潮州</a><a className="isoffline" href="#">昌吉</a><a className="isoffline" href="#">沧州</a><a className="isoffline" href="#">郴州</a><a className="isoffline" href="#">常德</a><a className="isoffline" href="#">滁州</a><a className="isoffline" href="#">朝阳</a><a className="isoffline" href="#">昌都</a><a className="isoffline" href="#">池州</a><a className="isoffline" href="#">承德</a></span></p>
					              </li>
					              <li id="city-D">
					                <p className="cf"><span className="label"><strong>D</strong></span><span><a className="isonline" href="#">东莞</a><a className="isonline" href="#">大连</a><a className="isonline" href="#">东营</a><a className="isoffline" href="#">大庆</a><a className="isoffline" href="#">大同</a><a className="isoffline" href="#">大理</a><a className="isoffline" href="#">德阳</a><a className="isoffline" href="#">迪庆</a><a className="isoffline" href="#">达州</a><a className="isoffline" href="#">德州</a><a className="isoffline" href="#">丹东</a><a className="isoffline" href="#">大兴安岭</a><a className="isoffline" href="#">德宏</a><a className="isoffline" href="#">定西</a></span></p>
					              </li>
					              <li id="city-E">
					                <p className="cf"><span className="label"><strong>E</strong></span><span><a className="isoffline" href="#">恩施</a><a className="isoffline" href="#">鄂州</a><a className="isoffline" href="#">鄂尔多斯</a></span></p>
					              </li>
					              <li id="city-F">
					                <p className="cf"><span className="label"><strong>F</strong></span><span><a className="isonline" href="#">福州</a><a className="isonline" href="#">佛山</a><a className="isonline" href="#">抚顺</a><a className="isoffline" href="#">阜阳</a><a className="isoffline" href="#">抚州</a><a className="isoffline" href="#">防城港</a><a className="isoffline" href="#">阜新</a></span></p>
					              </li>
					              <li id="city-G">
					                <p className="cf"><span className="label"><strong>G</strong></span><span><a className="isonline" href="#">广州</a><a className="isonline" href="#">贵阳</a><a className="isonline" href="#">桂林</a><a className="isoffline" href="#">赣州</a><a className="isoffline" href="#">广元</a><a className="isoffline" href="#">果洛</a><a className="isoffline" href="#">固原</a><a className="isoffline" href="#">甘南</a><a className="isoffline" href="#">甘孜</a><a className="isoffline" href="#">广安</a><a className="isoffline" href="#">贵港</a></span></p>
					              </li>
					              <li id="city-H">
					                <p className="cf"><span className="label"><strong>H</strong></span><span><a className="isonline" href="#">杭州</a><a className="isonline" href="#">哈尔滨</a><a className="isonline" href="#">合肥</a><a className="isonline" href="#">邯郸</a><a className="isonline" href="#">惠州</a><a className="isonline" href="#">海口</a><a className="isonline" href="#">呼和浩特</a><a className="isonline" href="#">衡阳</a><a className="isonline" href="#">湖州</a><a className="isoffline" href="#">淮北</a><a className="isoffline" href="#">鹤岗</a><a className="isoffline" href="#">海北</a><a className="isoffline" href="#">海东</a><a className="isoffline" href="#">黄南</a><a className="isoffline" href="#">菏泽</a><a className="isoffline" href="#">海南州</a><a className="isoffline" href="#">黑河</a><a className="isoffline" href="#">和田</a><a className="isoffline" href="#">哈密</a><a className="isoffline" href="#">淮安</a><a className="isoffline" href="#">淮南</a><a className="isoffline" href="#">黄山</a><a className="isoffline" href="#">海西</a><a className="isoffline" href="#">贺州</a><a className="isoffline" href="#">怀化</a><a className="isoffline" href="#">河池</a><a className="isoffline" href="#">呼伦贝尔</a><a className="isoffline" href="#">衡水</a><a className="isoffline" href="#">河源</a><a className="isoffline" href="#">红河</a><a className="isoffline" href="#">汉中</a><a className="isoffline" href="#">黄冈</a><a className="isoffline" href="#">黄石</a><a className="isoffline" href="#">鹤壁</a><a className="isoffline" href="#">葫芦岛</a></span></p>
					              </li>
					              <li id="city-J">
					                <p className="cf"><span className="label"><strong>J</strong></span><span><a className="isonline" href="#">济南</a><a className="isonline" href="#">济宁</a><a className="isonline" href="#">嘉兴</a><a className="isonline" href="#">金华</a><a className="isonline" href="#">焦作</a><a className="isonline" href="#">荆州</a><a className="isonline" href="#">吉林</a><a className="isonline" href="#">锦州</a><a className="isonline" href="#">江门</a><a className="isoffline" href="#">景德镇</a><a className="isoffline" href="#">吉安</a><a className="isoffline" href="#">佳木斯</a><a className="isoffline" href="#">酒泉</a><a className="isoffline" href="#">金昌</a><a className="isoffline" href="#">鸡西</a><a className="isoffline" href="#">济源</a><a className="isoffline" href="#">晋城</a><a className="isoffline" href="#">揭阳</a><a className="isoffline" href="#">晋中</a><a className="isoffline" href="#">荆门</a><a className="isoffline" href="#">九江</a></span></p>
					              </li>
					              <li id="city-K">
					                <p className="cf"><span className="label"><strong>K</strong></span><span><a className="isonline" href="#">昆明</a><a className="isonline" href="#">昆山</a><a className="isoffline" href="#">喀什</a><a className="isoffline" href="#">克拉玛依</a><a className="isoffline" href="#">开封</a><a className="isoffline" href="#">克州</a></span></p>
					              </li>
					              <li id="city-L">
					                <p className="cf"><span className="label"><strong>L</strong></span><span><a className="isonline" href="#">兰州</a><a className="isonline" href="#">临沂</a><a className="isonline" href="#">连云港</a><a className="isonline" href="#">聊城</a><a className="isonline" href="#">临汾</a><a className="isonline" href="#">柳州</a><a className="isonline" href="#">洛阳</a><a className="isonline" href="#">廊坊</a><a className="isoffline" href="#">龙岩</a><a className="isoffline" href="#">六盘水</a><a className="isoffline" href="#">凉山</a><a className="isoffline" href="#">六安</a><a className="isoffline" href="#">丽江</a><a className="isoffline" href="#">临沧</a><a className="isoffline" href="#">陇南</a><a className="isoffline" href="#">拉萨</a><a className="isoffline" href="#">辽源</a><a className="isoffline" href="#">辽阳</a><a className="isoffline" href="#">莱芜</a><a className="isoffline" href="#">漯河</a><a className="isoffline" href="#">吕梁</a><a className="isoffline" href="#">丽水</a><a className="isoffline" href="#">临夏</a><a className="isoffline" href="#">林芝</a><a className="isoffline" href="#">娄底</a><a className="isoffline" href="#">来宾</a><a className="isoffline" href="#">泸州</a><a className="isoffline" href="#">乐山</a></span></p>
					              </li>
					              <li id="city-M">
					                <p className="cf"><span className="label"><strong>M</strong></span><span><a className="isoffline" href="#">马鞍山</a><a className="isoffline" href="#">绵阳</a><a className="isoffline" href="#">茂名</a><a className="isoffline" href="#">牡丹江</a><a className="isoffline" href="#">梅州</a><a className="isoffline" href="#">眉山</a></span></p>
					              </li>
					              <li id="city-N">
					                <p className="cf"><span className="label"><strong>N</strong></span><span><a className="isonline" href="#">南京</a><a className="isonline" href="#">宁波</a><a className="isonline" href="#">南通</a><a className="isonline" href="#">南宁</a><a className="isonline" href="#">南昌</a><a className="isoffline" href="#">南充</a><a className="isoffline" href="#">宁德</a><a className="isoffline" href="#">内江</a><a className="isoffline" href="#">怒江</a><a className="isoffline" href="#">南平</a><a className="isoffline" href="#">南阳</a><a className="isoffline" href="#">那曲</a></span></p>
					              </li>
					              <li id="city-P">
					                <p className="cf"><span className="label"><strong>P</strong></span><span><a className="isoffline" href="#">萍乡</a><a className="isoffline" href="#">平顶山</a><a className="isoffline" href="#">莆田</a><a className="isoffline" href="#">濮阳</a><a className="isoffline" href="#">攀枝花</a><a className="isoffline" href="#">平凉</a><a className="isoffline" href="#">普洱</a><a className="isoffline" href="#">盘锦</a></span></p>
					              </li>
					              <li id="city-Q">
					                <p className="cf"><span className="label"><strong>Q</strong></span><span><a className="isonline" href="#">青岛</a><a className="isonline" href="#">泉州</a><a className="isonline" href="#">秦皇岛</a><a className="isonline" href="#">齐齐哈尔</a><a className="isoffline" href="#">庆阳</a><a className="isoffline" href="#">衢州</a><a className="isoffline" href="#">黔西南</a><a className="isoffline" href="#">钦州</a><a className="isoffline" href="#">黔南</a><a className="isoffline" href="#">曲靖</a><a className="isoffline" href="#">黔东南</a><a className="isoffline" href="#">七台河</a><a className="isoffline" href="#">清远</a></span></p>
					              </li>
					              <li id="city-R">
					                <p className="cf"><span className="label"><strong>R</strong></span><span><a className="isoffline" href="#">日照</a><a className="isoffline" href="#">日喀则</a></span></p>
					              </li>
					              <li id="city-S">
					                <p className="cf"><span className="label"><strong>S</strong></span><span><a className="isonline" href="#">上海</a><a className="isonline" href="#">深圳</a><a className="isonline" href="#">沈阳</a><a className="isonline" href="#">苏州</a><a className="isonline" href="#">石家庄</a><a className="isonline" href="#">绍兴</a><a className="isonline" href="#">顺德</a><a className="isonline" href="#">三亚</a><a className="isoffline" href="#">韶关</a><a className="isoffline" href="#">绥化</a><a className="isoffline" href="#">松原</a><a className="isoffline" href="#">上饶</a><a className="isoffline" href="#">十堰</a><a className="isoffline" href="#">三门峡</a><a className="isoffline" href="#">山南</a><a className="isoffline" href="#">邵阳</a><a className="isoffline" href="#">遂宁</a><a className="isoffline" href="#">商丘</a><a className="isoffline" href="#">朔州</a><a className="isoffline" href="#">随州</a><a className="isoffline" href="#">汕尾</a><a className="isoffline" href="#">四平</a><a className="isoffline" href="#">三峡</a><a className="isoffline" href="#">宿迁</a><a className="isoffline" href="#">三明</a><a className="isoffline" href="#">石嘴山</a><a className="isoffline" href="#">双鸭山</a><a className="isoffline" href="#">汕头</a><a className="isoffline" href="#">宿州</a><a className="isoffline" href="#">商洛</a></span></p>
					              </li>
					              <li id="city-T">
					                <p className="cf"><span className="label"><strong>T</strong></span><span><a className="isonline" href="#">天津</a><a className="isonline" href="#">太原</a><a className="isonline" href="#">泰安</a><a className="isonline" href="#">台州</a><a className="isonline" href="#">唐山</a><a className="isonline" href="#">泰州</a><a className="isoffline" href="#">塔城</a><a className="isoffline" href="#">铜陵</a><a className="isoffline" href="#">铜川</a><a className="isoffline" href="#">台北</a><a className="isoffline" href="#">铜仁</a><a className="isoffline" href="#">吐鲁番</a><a className="isoffline" href="#">天水</a><a className="isoffline" href="#">通辽</a><a className="isoffline" href="#">铁岭</a><a className="isoffline" href="#">通化</a></span></p>
					              </li>
					              <li id="city-W">
					                <p className="cf"><span className="label"><strong>W</strong></span><span><a className="isonline" href="#">武汉</a><a className="isonline" href="#">无锡</a><a className="isonline" href="#">温州</a><a className="isonline" href="#">芜湖</a><a className="isonline" href="#">威海</a><a className="isonline" href="#">潍坊</a><a className="isoffline" href="#">乌鲁木齐</a><a className="isoffline" href="#">梧州</a><a className="isoffline" href="#">吴忠</a><a className="isoffline" href="#">武威</a><a className="isoffline" href="#">渭南</a><a className="isoffline" href="#">乌兰察布</a><a className="isoffline" href="#">文山</a><a className="isoffline" href="#">乌海</a></span></p>
					              </li>
					              <li id="city-X">
					                <p className="cf"><span className="label"><strong>X</strong></span><span><a className="isonline" href="#">西安</a><a className="isonline" href="#">厦门</a><a className="isonline" href="#">徐州</a><a className="isonline" href="#">襄阳</a><a className="isonline" href="#">西宁</a><a className="isoffline" href="#">孝感</a><a className="isoffline" href="#">西双版纳</a><a className="isoffline" href="#">新余</a><a className="isoffline" href="#">湘潭</a><a className="isoffline" href="#">锡林郭勒</a><a className="isoffline" href="#">兴安</a><a className="isoffline" href="#">邢台</a><a className="isoffline" href="#">新乡</a><a className="isoffline" href="#">湘西</a><a className="isoffline" href="#">忻州</a><a className="isoffline" href="#">咸阳</a><a className="isoffline" href="#">宣城</a><a className="isoffline" href="#">香港</a><a className="isoffline" href="#">信阳</a><a className="isoffline" href="#">咸宁</a><a className="isoffline" href="#">许昌</a></span></p>
					              </li>
					              <li id="city-Y">
					                <p className="cf"><span className="label"><strong>Y</strong></span><span><a className="isonline" href="#">扬州</a><a className="isonline" href="#">烟台</a><a className="isonline" href="#">盐城</a><a className="isonline" href="#">运城</a><a className="isonline" href="#">义乌</a><a className="isonline" href="#">岳阳</a><a className="isonline" href="#">宜昌</a><a className="isoffline" href="#">玉林</a><a className="isoffline" href="#">银川</a><a className="isoffline" href="#">鹰潭</a><a className="isoffline" href="#">雅安</a><a className="isoffline" href="#">伊犁</a><a className="isoffline" href="#">玉树</a><a className="isoffline" href="#">宜春</a><a className="isoffline" href="#">营口</a><a className="isoffline" href="#">永州</a><a className="isoffline" href="#">宜宾</a><a className="isoffline" href="#">益阳</a><a className="isoffline" href="#">玉溪</a><a className="isoffline" href="#">阳泉</a><a className="isoffline" href="#">延安</a><a className="isoffline" href="#">榆林</a><a className="isoffline" href="#">云浮</a><a className="isoffline" href="#">延边</a><a className="isoffline" href="#">阳江</a><a className="isoffline" href="#">伊春</a></span></p>
					              </li>
					              <li id="city-Z">
					                <p className="cf"><span className="label"><strong>Z</strong></span><span><a className="isonline" href="#">郑州</a><a className="isonline" href="#">镇江</a><a className="isonline" href="#">中山</a><a className="isonline" href="#">淄博</a><a className="isonline" href="#">珠海</a><a className="isonline" href="#">遵义</a><a className="isoffline" href="#">株洲</a><a className="isoffline" href="#">自贡</a><a className="isoffline" href="#">舟山</a><a className="isoffline" href="#">湛江</a><a className="isoffline" href="#">肇庆</a><a className="isoffline" href="#">漳州</a><a className="isoffline" href="#">张掖</a><a className="isoffline" href="#">昭通</a><a className="isoffline" href="#">张家界</a><a className="isoffline" href="#">周口</a><a className="isoffline" href="#">驻马店</a><a className="isoffline" href="#">张家口</a><a className="isoffline" href="#">资阳</a><a className="isoffline" href="#">中卫</a><a className="isoffline" href="#">枣庄</a></span></p>
					              </li>
					            </ol>
					          </div>
					          </div>
					        </div>
					      </div>
					    </div>
				    </div>
				  </div>
				</div> 
			</div>
			);
	}
});